<script>
let tallySettingComponent = {
    template: `
       <div style="width: 100%">
        <p style="margin-bottom: 15px;">

            <div style="display: flex;align-items: center">
                <h2 class="danger">{{currentTally.title}}</h2>
                <div v-if="userData['vip_status'] != 1">
                <div v-if="day > 0">
                    <img src="/public/images/huiyuan_se.png" >
                    <span style="color: #EBA451">会员到期时间：{{timeDate}}</span>
                </div>

                <div v-else>
                    <img src="/public/images/huiyuan_icon.png" >
                    <span style="color: #999999">会员暂未开通</span>
                </div>
                </div>
            </div>
            <el-button v-if="currentTally.role=='admin'" type="warning" size="mini" @click="editTally" class="frBtn" icon="el-icon-edit"> 编辑账本</el-button>
            <el-button v-if="currentTally.role=='admin'" type="danger" size="mini" @click="editUidTally" class="frBtn" icon="el-icon-edit" style="margin-right: 10px"> 更换管理员</el-button>

</p>
        <p>
            公司：{{currentTally.company_title}}
        </p>
         <p>
            账本类型：<span v-if="currentTally.financial_type == '1' " class="success">仅会计记账，无需审核</span>
            <span v-if="currentTally.financial_type == '2' " class="blue">会计记账，出纳审核</span>
        </p>
        <p>
            所在地：{{ currentTally.province }}-{{ currentTally.city }}
        </p>
        <p>
            行业：
            <span v-if="currentTally.industry.length>1">
                {{ industryFormat(currentTally.industry[0])}}{{ industryFormat(currentTally.industry[1])}}
            </span>
        </p>
        <p>
            备注：{{ currentTally.memo }}
        </p>
        <el-divider></el-divider>
        <p style="margin-bottom: 20px;">
            <span class="h4">协作管理</span>
            <el-button type="primary" size="mini" @click="bindUserDialog=true" class="frBtn" v-if="currentTally.role == 'admin' " icon="el-icon-plus">添加协作者</el-button>
        </p>
<div>
        <template>
            <el-table stripe border :data="tallyUsers">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户">
                    <template slot-scope="scope">
                        {{ scope.row.username || scope.row.mobile }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号">
                </el-table-column>
                <el-table-column
                        prop="role_name"
                        label="角色">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.role == 'admin' " type="success">{{scope.row.role_name}}</el-tag>
                        <el-tag  v-if="scope.row.role != 'admin'" type="info">{{scope.row.role_name}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="created_time"
                        label="加入时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <span v-if="currentTally.role == 'admin' && scope.row.role == 'pmanger' " >
                            <el-button type="success" size="mini" @click="setUserProject(scope.row, scope.$index)">项目配置</el-button>
                            <el-button type="warning" size="mini" @click="setUserAccounts(scope.row, scope.$index)">账户配置</el-button>
                        </span>


                        <span v-if="currentTally.role == 'admin' && scope.row.role != 'admin' " >
                             <el-button type="danger" size="mini" icon="el-icon-delete" @click="unbindMemberRow(scope.row, scope.$index)">移除协作者</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
</div>
        <div style="height:20px"></div>
        <p style="margin-bottom: 20px;">
            <span class="h4">操作日志</span>
        </p>
<div>
        <template>
            <el-table stripe :data="tallyLog">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="created_time"
                        label="操作时间">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="操作人">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="日志内容">
                </el-table-column>
            </el-table>
            <p style="margin-top: 10px;">
                <el-pagination
                        background
                        layout="prev, pager, next, total"
                        :page-size="logPageSize"
                        :total="logTotalCount"
                        @current-change="handleLogPageChange"
                >
                </el-pagination>
            </p>
        </template>
    </div>
    <!--账本新增 编辑表单框------>
     <tally-form :dialogShow="tallyDialog" :formRow="tallyForm" @modalClose="tallyModalClose"></tally-form>
    <!--添加协作者表单框--------->
    <binduser-form :dialogShow="bindUserDialog" @modalClose="bindModalClose" @getTallyUsersList="getTallyUsersList"></binduser-form>
    <!--  更换超级管理员  -->
    <edit-uid-tally :dialogShow="editUidTallyDiaolog" @modalClose="editUidClose" @refreshTally="successRefresh"></edit-uid-tally>
    <bind-projects :dialogShow="bindProjectsDialog"  :formRow="userse" @modalClose="bindProjectsClose" @getTallyUsersList="getTallyUsersList"></bind-projects>
    <bind-accounts :dialogShow="bindAccountsDialog"  :formRow="userse" @modalClose="bindAccountsClose" @getTallyUsersList="getTallyUsersList"></bind-accounts>
</div>
    `,
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        day () {
            return this.$store.state.day
        },
        currentTally () {
            return this.$store.state.currentTally // 从store中获取实时数据
        },
        timeDate(){

            let n=new Date(this.$store.state.currentTally['express_time']*1000);
            let str =   n.toLocaleDateString().replace(/\//g, "-");
            if(this.$store.state.currentTally['express_time'] >= 4102415999){
                return '永久';
            }
            return  str;
        },
        industryOptions() {
            return this.$store.state.industryOptions
        },
        userData () {
            return this.$store.state.userData
        },
        industryFormat() {
            let that = this
            return function (iid) {
                let str = ''
                for(let i = 0 ; i < that.industryOptions.length ; i++) {
                    if(parseInt(that.industryOptions[i]['id']) === parseInt(iid)) {
                        str = that.industryOptions[i]['name']
                        break
                    }
                }
                return str
            }
        }
    },
    data:function(){
        return {
            logPageSize:10,
            logTotalCount:0,
            tallyDialog:false,
            bindUserDialog:false,
            bindAccountsDialog:false,
            bindProjectsDialog:false,
            editUidTallyDiaolog:false,
            userse:{},
            tallyLog:[],
            tallyForm:{},
            tallyUsers:[],
        }
    },
    mounted () {
        this.initData()
    },
    methods:{
        bindProjectsClose(){
            this.bindProjectsDialog = false;
        },
        bindAccountsClose(){
            this.bindAccountsDialog = false;
        },
        successRefresh(){
          this.getTallyList();
        },
        initData() {
            this.getTallyLogList()
            this.getTallyUsersList()

        },
        tallyModalClose(){
            this.tallyDialog = false
        },
        editUidTally(){
            this.editUidTallyDiaolog = true;
            console.log(this.editUidTallyDiaolog)

        },
        editUidClose(){
            this.editUidTallyDiaolog = false;
        },
        editTally(){
            this.tallyForm = JSON.parse(JSON.stringify(this.currentTally))
            this.tallyDialog = true;
        },
        handleLogPageChange(currentPage){
            this.getTallyLogList(currentPage)
        },
        getTallyLogList(page){
            let that = this
            axios.get('/api/tally/log',{
                method: 'get',
                headers: {'token': loginToken},
                params: {
                    tally_id: that.currentTallyId,
                    page: page || 1
                }
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.tallyLog = res.data.data
                    that.logPageSize = res.data.extra.pageSize
                    that.logTotalCount = res.data.extra.totalCount
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
        getTallyList(){
            let that = this
            return new Promise(
                function (resolve, reject) {
                    that.$store.dispatch('getTallyList').then((list)=>{
                        if(list.length > 0) {
                            location.href = '/tally?id='+list[0]['id']
                        }else{
                            setTimeout(function () {
                                location.href='/tallyList'
                            },1000)
                        }
                        setTimeout(function () {
                            resolve()
                        },300)
                    }).catch(()=>{
                        reject()
                    })
                }
            )
        },
        _initTally(){
            let that = this;
            this.getTallyList().then(
                function(){
                    Promise.all([
                        that.$store.dispatch('getCategoryListBase',{
                            tallyId:that.currentTallyId,
                            cateType:1
                        }),
                        that.$store.dispatch('getCategoryListBase',{
                            tallyId:that.currentTallyId,
                            cateType:2
                        }),
                        that.$store.dispatch('getAccountList',that.currentTallyId),
                        that.$store.dispatch('getProjectList',that.currentTallyId),
                        that.$store.dispatch('getMemberList',that.currentTallyId),
                        that.$store.dispatch('getStoreList',{
                            tallyId:that.currentTallyId,
                            type:1
                        }),
                        that.$store.dispatch('getStoreList',{
                            tallyId:that.currentTallyId,
                            type:2
                        }),
                    ]).then(function () {
                        console.log('账本数据初始化完成');
                        that._initOther();
                        that.initLoading = false
                    })
                }
            )
        },
        _initOther(){
            this.$store.dispatch('getAccountTags',this.currentTallyId)
            this.$store.dispatch('getIndustryOptions')
        },
        bindModalClose(){
            this.bindUserDialog = false
        },
        getTallyUsersList(){
            let that = this
            axios.get('/api/tally/users',{
                method: 'get',
                headers: {'token': loginToken},
                params: {id: that.currentTallyId}
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.tallyUsers = res.data.data
                }else{
                    that.$emit('show_tips','error','解析数据失败:'+res.data.error_message)
                }
            })
        },
        setUserProject(row,index){
            console.log(row)
            this.userse = row;
            this.bindProjectsDialog = true;
        },
        setUserAccounts(row,index){
            console.log(row)
            this.userse = row;
            this.bindAccountsDialog = true;
        },
        unbindMemberRow(row,index){
            let that = this
            this.$confirm('确定要移除该协作用户：'+row['mobile'], '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if(action === 'confirm') {
                        let postUrl = '/api/tally/unbind-user'
                        axios.post(postUrl,{
                            id: that.currentTallyId,
                            uid: row['uid']
                        },{
                            headers: {'token': loginToken},
                        }).then(function(res) {
                            if(res.data.status === 'success'){
                                that.$message({
                                    type: 'success',
                                    message: '操作成功~'
                                });
                                that.tallyUsers.splice(index, 1);
                            }else{
                                that.$message({
                                    type: 'error',
                                    message: '解析数据失败:'+res.data.error_message
                                })
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>
